<!-- 上传头像 -->
<template>
	<view
		class="custom_upload_wrap"
		@click="handleUpload"
		:style="{'width':width+'rpx','height':height+'rpx'}">
		<view class="tx" v-if="modelValue && !uploading">
			<image :src="modelValue" mode=""></image>
		</view>
		<view class="upload_icon" v-else-if="!uploading">
			<image src="/static/login/camera.png" mode=""></image>
		</view>
		<!-- 上传中状态 -->
		<view class="uploading" v-if="uploading">
			<view class="loading_icon">
				<image src="/static/common/loading.gif" mode="" v-if="loadingGif"></image>
				<text v-else>上传中...</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineComponent, defineProps, defineEmits } from 'vue';
	import commonApi from '@/api/common';

	defineComponent({
		name:'custom-upload-tx'
	})

	const props = defineProps({
		modelValue: {
			type: String,
			default:()=>{
				return ''
			}
		},
		width:{
			type: [Number,String],
			default:()=>{
				return 80
			}
		},
		height:{
			type: [Number,String],
			default:()=>{
				return 80
			}
		}
	})

	const emit = defineEmits(['update:modelValue']);

	// 上传状态
	const uploading = ref(false);
	const loadingGif = ref(false); 

	
	/**
	 *  图片上传
	 */
	const handleUpload = async () => {
		if (uploading.value) {
			return;
		}

		try {
			const chooseResult = await new Promise((resolve, reject) => {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['compressed'], 
					sourceType: ['album', 'camera'], 
					success: resolve,
					fail: reject
				});
			});

			const { tempFiles } = chooseResult;

			if (!tempFiles || tempFiles.length === 0) {
				uni.showToast({
					title: '未选择图片',
					icon: 'none'
				});
				return;
			}

			const file = tempFiles[0];

			// 限制10M
			const maxSize = 10 * 1024 * 1024; // 10MB
			if (file.size > maxSize) {
				uni.showToast({
					title: '图片大小不能超过10MB',
					icon: 'none'
				});
				return;
			}

			uploading.value = true;

			// 调用上传接口
			const uploadResult = await commonApi.upload(file.tempFilePath);

			// 更新组件值
			emit('update:modelValue', uploadResult.url || uploadResult);

			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});

		} catch (error) {
			console.error('上传失败:', error);
			uni.showToast({
				title: error.message,
				icon: 'none'
			});

		} finally {
			uploading.value = false;
		}
	};

</script>

<style lang="scss">
	.custom_upload_wrap{
		border-radius: 100%;
		background: #F2F5F7;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;

		.tx{
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.upload_icon{
			width: 28rpx;
			height:28rpx;
			image{
				width: 42rpx;
				height: 42rpx;
				display: flex;
			}
		}

		.uploading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100%;

			.loading_icon {
				color: #fff;
				font-size: 24rpx;
				text-align: center;

				image {
					width: 40rpx;
					height: 40rpx;
					animation: rotate 1s linear infinite;
				}
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>